<template>
    <div>
        <el-row>
            <el-col :span="12" >
                <div class="grid-content">
                    <v-chart :options="option1" :watchShallow="true" :auto-resize="true" :style="{ width: '100%', height: '100%' }" />
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12"
            ><div class="grid-content">
                <v-chart :options="option2" :watchShallow="true" :auto-resize="true" :style="{ width: '100%', height: '100%' }" /></div
            ></el-col>
            <el-col :span="12"
            ><div class="grid-content"><v-chart :options="option3" :watchShallow="true" :auto-resize="true" :style="{ width: '100%', height: '100%' }" /></div
            ></el-col>
        </el-row>
    </div>
</template>
<script>
const pinyin = require("js-pinyin");
const chartTitle = "办公用房申请统计";
const optionList = ['潭村', '中二', '五山'];
const monthList = ['12月', '11月', '10月', '9月', '8月', '7月'];
const chartTitle2 = "部门申请情况";
const options2List = ['机关服务中心','信息中心','个人所得税处','考核考评处','纳税服务处','其它'];

const optionMonthDataList = {};
function randomRange(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}
optionMonthDataList[pinyin.getFullChars(optionList[0])] = [4 , 5 , 3 , 2 , 4 , 4];
optionMonthDataList[pinyin.getFullChars(optionList[1])] = [1 , 0 , 0 , 0 , 2 , 1];
optionMonthDataList[pinyin.getFullChars(optionList[2])] = [0 , 2 , 0 , 0 , 3 , 1];
const seriesDataList = [];
for (var olk in optionList){
    var optionName = optionList[olk];
    var nameAcronym = pinyin.getFullChars(optionName);
    seriesDataList.push({ name : optionName , data : optionMonthDataList[nameAcronym] , type :'bar'});
}

const options2MonthDataList = {};
options2MonthDataList[pinyin.getFullChars(optionList[0])] = [2 , 4 , 6 , 6 , 4 , 1];
options2MonthDataList[pinyin.getFullChars(optionList[1])] = [0 , 3 , 1 , 1 , 1 , 0];
options2MonthDataList[pinyin.getFullChars(optionList[2])] = [0 , 0 , 1 , 2 , 0 , 1];
console.log(options2MonthDataList);
const seriesData2List = [];
for (var olk in optionList){
    var optionName = optionList[olk];
    var nameAcronym = pinyin.getFullChars(optionName);
    seriesData2List.push({ name : optionName , data : options2MonthDataList[nameAcronym] , type :'line'});
}
console.log(seriesData2List);
let randNum = randomRange(0 , 2);
const chartTitle3 = optionList[randNum];
const seriesData3List = [];
for (var olk in options2List){
    var optionName = optionList[randNum];
    var nameAcronym = pinyin.getFullChars(optionName);
    seriesData3List.push({ value: options2MonthDataList[nameAcronym] , name: options2List[olk]});
}
export default {
    name: pinyin.getFullChars(chartTitle),
    filters : {
        pinyin : function (value){
            return pinyin.getFullChars(value);
        }
    },
    data() {
        return {
            option1: {
                title: {
                    text: chartTitle,
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: monthList
                },
                yAxis: {
                    type: 'value'
                },
                legend: {
                    data: optionList,
                    bottom: 0
                },
                series: seriesDataList
            },
            option2: {
                title: {
                    text: chartTitle2,
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: options2List
                },
                yAxis: {
                    type: 'value'
                },
                legend: {
                    data: optionList,
                    bottom: 0
                },
                series: seriesData2List
            },
            option3: {
                title: {
                    text: chartTitle3,
                    left: 'center'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: {
                    name: chartTitle3,
                    type: 'pie',
                    radius: '50%',
                    label: {
                        normal: {
                            formatter: '{b}：{d}%'
                        }
                    },
                    percentPrecision:0,
                    data: seriesData3List,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            }
        };
    }
};
</script>
<style lang="scss" scoped>
.grid-content {
    height: 50vh;
    margin-top: 20px;
}
.table-sty {
    margin: 20px;
}
</style>
